<%@page import="com.kensure.shike.constant.BusiConstant"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title><%=BusiConstant.name%></title>
	<meta http-equiv="Content-Type" content="textml; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<link href="<%=BusiConstant.context%>/page1/webview/css/index.css" rel="stylesheet" type="text/css" media="all" />
	<script type="text/javascript" src="<%=BusiConstant.context%>/common/js/jquery.min.js"></script>
	<script type="text/javascript" src="<%=BusiConstant.context%>/common/js/jquery.cookie.js"></script>
	<script type="text/javascript" src="<%=BusiConstant.context%>/common/base.js?ver=<%=BusiConstant.version%>"></script>
	<script type="text/javascript" src="<%=BusiConstant.context%>/common/http.js?ver=<%=BusiConstant.version%>"></script>
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
	
	<link href="<%=BusiConstant.context%>/common/css/swiper.min.css" rel="stylesheet">
	<script src="<%=BusiConstant.context%>/common/js/swiper.min.js"></script>
	
	<link href="<%=BusiConstant.context%>/page1/webview/index/css/index.css" rel="stylesheet" type="text/css" media="all" />
	<link href="<%=BusiConstant.context%>/page1/webview/index/css/modal.css" rel="stylesheet" type="text/css" media="all" />
	<script src="<%=BusiConstant.context%>/page1/webview/index/js/modal.js"></script>
	
	<style type="text/css">
	.zfcontainer{
	 	background-color: #fff;
	 	padding:10px;
	}
	.aui-search {
	    background: #fafafa;
	    width: 80%;
	    margin: 12px;
	    position: relative;
	    border: 1px solid #43464b;
    }
   .icon-search {
    position: absolute;
    left: 5px;
    top: 7px;
}
	.icon {
	    width: 20px;
	    height: 20px;
	    display: block;
	    border: none;
	    float: left;
	    background-size: 20px;
	    background-repeat: no-repeat;
	}
	.aui-search input {
    width: 90%;
    background: none;
    border: none;
    padding: 0.5rem 0.5rem;
    font-size: 0.85rem;
}

button, input, optgroup, select, textarea {
    margin: 0;
    font: inherit;
    color: inherit;
    outline: none;
}
.aui-navBar {
    height: 60px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    z-index: 1002;
    background: #fff;
}
    
    .aui-flexView {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.typebox{
    width:99%;
    align-items: center;
    background-color: #fff;
    overflow-x:auto;
}
.typebox .status-label{
    margin:6px 6px 6px 6px;
    line-height:26px;
    text-align: center;
    box-sizing: border-box;
    position: relative;
    border-bottom: 2px solid #fff;
    float:left;
}
.status-label.active{
    color:#000;
    font-weight:bold;
    border-bottom: 2px solid #e64340;
}

</style>
</head>
<body >
	<div class="zfcontainer">
	<section class="aui-flexView">
	    <header class="aui-navBar aui-navBar-fixed">
		<div class="aui-search">
	        <i class="icon icon-search"></i>
	        <input type="text" id="title" placeholder="搜索">    
	    </div>
	    <button id="btn1" onclick="getList()"  class="layui-btn layui-btn-normal" style="margin:12px;">搜索</button>
	    </header>
    </section>
	
	<!-- 类型 -->
	<div class="typebox" id="typename">
	
    </div>
	<!-- 类型结束 --> 
	
	<!-- 商品介绍 -->
		<div id="spjs">
		   
		</div>
	<!-- 商品介绍结束 --> 
	
	

	</div>	
	
	
</body>

<script>
var basecontext = '<%=BusiConstant.context%>';
var tokenid = getQueryVariable("token");
var typeid = getQueryVariable("typeid");
var title = getQueryVariable("title");
if(title){
	title = decodeURIComponent(title);
	$("#title").val(title)
}
addcookie(tokenid);

//获取广告
function getBanner(){
	var url = getbaseurl("/type/gettype.do");
	var data = {typeid:1};
	postdo(url, data, function(data){
		var all = {id:"0",name:"全部"};
		bannerhtml(all);
		
		var rows = data.resultData.rows;
		for(var i=0;rows && i<rows.length;i++){
			var row = rows[i];
			bannerhtml(row);
		}
	}, null, null);
}

function bannerhtml(row){	
	var ac = "";
	if(typeid && typeid == (row.id+"")){
		ac = "active";
	}
	var html = ' <div onclick="settap('+row.id+',this)" class="status-label '+ac+'">'+row.name+'</div>';
	$("#typename").append(html);
}
getBanner();

//跳转函数
function tapBanner(url){
	 wx.miniProgram.navigateTo({
	      url: url
	 });
}
//设置选中
function settap(id,thisojb){
	typeid = id;
	$(thisojb).siblings().removeClass("active");
	$(thisojb).addClass("active");
	getList();
}


//商品介绍
function getList(){
	var url = getbaseurl("/baobei/qdlist.do");
	
	var data = {tokenid:tokenid,typeid:typeid,title:$("#title").val()};
	if(typeid == "0"){
		data.typeid = "";
	}
	postdo(url, data, function(data){
		$("#spjs").html("");
		var rows = data.resultData.rows;
		showtable(rows);
	}, null, null);
}
getList();

function showtable(rows){
	var html = ' <div class="goods-container" >';
	for(var i=0;rows && i<rows.length;i++){
		var baobei = rows[i];
		var title = baobei.title;
		if(baobei.code){
			title += '<strong style="color:red">('+baobei.code+')</strong>';
		}
		html+= '<div class="goods-box" onclick="tapBanner(\'/pages/goods-details/index?id='+baobei.id+'\')">';
			html+= '<div class="img-box">';
			html+= ' <image src="'+baobei.picurl+'" class="image" mode="aspectFill" lazy-load="true" />';
			html+= '</div>';
			html+= '<div class="goods-title" style="text-overflow:ellipsis;word-wrap:break-word;word-break: break-all;">'+title+'</div>';
		html+= '</div>';		
	}
	html+=  ' </div>	';
	$("#spjs").append(html);
}

</script>

</html>
